一段代码阐述一个轮播思路
不BB，直接上代码：
1. if (direction === 'next') {
2. this.index = nextIndex;
3. /*如果是下一个，那就先吧下个的dom设置成none来移动位置，防止用户看到*/
4. nextEl.style.display = 'none';
5. nextEl.style.webkitTransition = '';
6. currentEl.style.display = 'block';
7. currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
8. setTimeout(()=> {
9. /*将下个放到指定的位置*/
10. nextEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
11. nextEl.style.display = 'block';
12. nextEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
13. setTimeout(() => {
14. /*开始轮播*/
15. currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
16. nextEl.style.webkitTransform = `translate3d(0, 0, 0)`;
17. }, 20);
18. }, 10);
19. } 注意：以上只是主思路代码，完整的代码解读完之后会贴出来供大家参考。
代码解读：思路是先判断滚动方向，如果是向下一个节点那我就准备下一个节点到指定位置（仅适合界面一次展示一个轮播节点），如果直接移动到指定位置肯定是不合理的，因为节点直接移动会让用户在浏览器界面看到，可是节点是肯定要移动啊，思路很简单，那我给节点穿一件隐身衣（display:none）,之后再移动到指定位置用户不就看不到了，但是注意这里存在一个问题，如果直接设置设置display：none之后立马就移动位置的话会存在一个问题，移动的效果用户仍然能看的到，这是因为非异步的JS代码在执行的过程中是会阻止浏览器的绘图和重绘的，所以为了绕开浏览器这个机制那就使用异步好了（setTimeout）,下一个节点的位置现在已经准备好了，现在如果还是直接移动的话，又会存在一个问题下一个节点竟然看不到移动，这是因为我们在准备节点的节点的时候已经将它隐藏了，所以为了让用户看到就不得不把隐身衣脱了（display:block）才行，这样又得加一个异步（setTimeout）才能生效了，现在就可以安心的执行当前节点和早已就绪的下一个节点了。
完整代码如下：
下面的轮播JS部分的代码是vue写的，主要功能包括了垂直轮播，水平轮播，手势轮播等几个轮播的主要功能
export default {
name: 'swipe',
props: {
/*默认是水平滚动*/
toward: {
type: String,
default: 'vertical'
},
/*是否展示指示标志*/
showIndicators: {
type: Boolean,
default: true
},
/*滚动速度*/
speed: {
type: Number,
default: 300
},
/*默认下标从哪儿开始*/
defaultIndex: {
type: Number,
default: 0
},
/*自动滚动间隔*/
interval: {
type: Number,
default: 3000
}
},
data() {
return {
dots: [], // 页面标记圆点
index: this.defaultIndex, //当前页面的下标
pageEls: [], // 所有的子轮播项集合
timer: null, //轮播定时器对象
noSwipe: false, //禁止滚动
startPosition: '', //touch的起始位置
currentPosition: '', //touch的目前位置
translatePosition: '', //touch位移的位置
distance: 10, //touch的位移大于10的时候生效
}
},
watch: {},
beforeMount: function () {
},
mounted(){
this.initSwipe();
this.swipeTimeout();
this.initTouchEvent();
},
computed: {
getNum(){
return this.pageEls.length;
},
},
methods: {
/*手动上一张*/
prev(){
window.clearTimeout(this.timer);
this.swipeTimeout('prev');
},
/*手动下一张*/
next(){
window.clearTimeout(this.timer);
this.swipeTimeout('next');
},
initTouchEvent(){
let dom = this.$el.querySelector('.swipe-warp');
dom.addEventListener('touchstart', this.handleTouchStart);
dom.addEventListener('touchmove', this.handleTouchMove);
dom.addEventListener('touchend', this.handleTouchEnd);
console.log(dom);
},
/*初始化轮播节点*/
initSwipe(){
var children = this.$children;
if (children.length === 1) {
this.noSwipe = false;
return;
}
children.forEach((child, _index)=> {
this.pageEls.push(child.$el);
});
},
/*定时轮播*/
swipeTimeout(toward = 'next'){
this.translate(toward, ()=> {
this.timer = window.setTimeout(()=> {
this.swipeTimeout('next');
}, this.interval);
});
},
/*滚动方法*/
translate(direction = 'next', cb){
let length = this.pageEls.length;
let currentIndex = this.index;
let currentEl = this.pageEls[currentIndex];
let nextIndex = ((this.index + 1) > (length - 1)) ? 0 : (this.index + 1);
let nextEl = this.pageEls[nextIndex];
let pervIndex = (this.index - 1) < 0 ? (length - 1) : (this.index - 1);
let pervEl = this.pageEls[pervIndex];
if (direction === 'next') {
this.index = nextIndex;
/*如果是下一个，那就先吧下个的dom设置成none来移动位置，防止用户看到*/
nextEl.style.display = 'none';
nextEl.style.webkitTransition = '';
currentEl.style.display = 'block';
currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
setTimeout(()=> {
/*将下个放到指定的位置*/
nextEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
nextEl.style.display = 'block';
nextEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
setTimeout(() => {
/*开始轮播*/
currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
nextEl.style.webkitTransform = `translate3d(0, 0, 0)`;
}, 20);
}, 10);
} else {
this.index = pervIndex;
/*如果是上一个，那就先吧上个的dom设置成none来移动位置，防止用户看到*/
pervEl.style.display = 'none';
pervEl.style.webkitTransition = '';
currentEl.style.display = 'block';
currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
setTimeout(()=> {
/*将上个放到指定的位置*/
pervEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
pervEl.style.display = 'block';
pervEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
setTimeout(() => {
/*开始轮播*/
currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
pervEl.style.webkitTransform = `translate3d(0, 0, 0)`;
}, 20);
}, 10);
}
this.once(currentEl, 'webkitTransitionEnd', ()=> {
cb && cb();
});
},
handleTouchStart($evnet){
this.startPosition = this.toward === 'horizontal' ? $evnet.touches[0].clientX : $evnet.touches[0].clientY;
},
handleTouchMove($evnet){
this.currentPosition = this.toward === 'horizontal' ? $evnet.touches[0].clientX : $evnet.touches[0].clientY;
this.translatePosition = this.currentPosition - this.startPosition;
this.translatePosition !== 0 && window.clearTimeout(this.timer);
$evnet.preventDefault();
$evnet.stopPropagation();
},
handleTouchEnd($evnet){
this.translatePosition < 0 && this.translatePosition < -this.distance && this.swipeTimeout('next');
this.translatePosition > 0 && this.translatePosition > this.distance && this.swipeTimeout('prev');
},
/*管理事件*/
once(el, event, fn) {
var that = this;
var listener = function () {
if (fn) {
fn.apply(this, arguments);
}
that.off(el, event, listener);
};
this.on(el, event, listener);
},
/*监听事件*/
on(element, event, handler){
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
},
/*移除事件*/
off(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
}
}
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。